<template>
  <!-- 线路类型管理 -->
  <div class="line-type">
    <!-- 条件搜索组件 -->
    <el-form :inline="true" :model="conditionForTransportLineType" class="demo-form-inline">
      <el-form-item label="类型编号">
        <el-input prefix-icon="el-icon-search" v-model="conditionForTransportLineType.typeNumber"
                  placeholder="类型编号"></el-input>
      </el-form-item>

      <el-form-item label="类型名称">
        <el-input v-model="conditionForTransportLineType.name" placeholder="类型名称"></el-input>
      </el-form-item>

      <el-form-item label="机构类型">
        <el-select v-model="conditionForTransportLineType.startAgencyType" clearable  placeholder="机构类型">
          <el-option label="所有机构" :value="null"></el-option>
          <el-option label="分公司" :value="1"></el-option>
          <el-option label="一级转运" :value="2"></el-option>
          <el-option label="二级转运" :value="3"></el-option>
          <el-option label="网点" :value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="queryByConditionAndPage(transportLineTypePageInfo.pageNum, transportLineTypePageInfo.pageSize)">
          查 询
        </el-button>
        <el-button type="primary"
                   @click="conditionForTransportLineType = {}; queryByConditionAndPage(transportLineTypePageInfo.pageNum, transportLineTypePageInfo.pageSize)">
          重 置
        </el-button>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>

    <!-- 添加组件-->
    <el-button type="primary" @click="show(null)">
      新增线路类型
    </el-button>

    <!-- 数据展示组件 -->
    <el-table :data="transportLineTypePageInfo.list" stripe style="width: 100%">
      <el-table-column prop="typeNumber" label="线路类型编号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column label="起始机构类型">
        <template slot-scope="{ row }">
          <i v-show="row.startAgencyType === 1">分公司</i>
          <i v-show="row.startAgencyType === 2">一级转运中心</i>
          <i v-show="row.startAgencyType === 3">二级转运中心</i>
          <i v-show="row.startAgencyType === 4">网点</i>
        </template>
      </el-table-column>
      <el-table-column label="终点机构类型">
        <template slot-scope="{ row }">
          <i v-show="row.endAgencyType === 1">分公司</i>
          <i v-show="row.endAgencyType === 2">一级转运中心</i>
          <i v-show="row.endAgencyType === 3">二级转运中心</i>
          <i v-show="row.endAgencyType === 4">网点</i>
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdateTime" label="最近更新时间"></el-table-column>
      <el-table-column prop="updater" label="更新人"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="primary" @click="show(row)">修 改</el-button>
          <el-button type="danger" @click="deleteById(row.id)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="transportLineTypePageInfo.pageNum"
      :page-sizes="[5, 10, 15, 20, 25]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="transportLineTypePageInfo.total">
    </el-pagination>

    <!-- 对话框展示 -->
    <el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" width="40%" center>
      <el-form label-position="right" label-width="100px" :model="operateForTransportLineType">
        <el-form-item label="类型编号">
          <el-input v-model="operateForTransportLineType.typeNumber" placeholder="类型编号"></el-input>
        </el-form-item>

        <el-form-item label="类型名称">
          <el-input v-model="operateForTransportLineType.name" placeholder="类型名称"></el-input>
        </el-form-item>

        <el-form-item label="起始机构类型">
          <el-select v-model="operateForTransportLineType.startAgencyType" placeholder="起始机构类型">
            <el-option label="分公司" :value="1"></el-option>
            <el-option label="一级转运" :value="2"></el-option>
            <el-option label="二级转运" :value="3"></el-option>
            <el-option label="网点" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="终点机构类型">
          <el-select v-model="operateForTransportLineType.endAgencyType" placeholder="终点机构类型">
            <el-option label="分公司" :value="1"></el-option>
            <el-option label="一级转运" :value="2"></el-option>
            <el-option label="二级转运" :value="3"></el-option>
            <el-option label="网点" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="commitOperate">提 交</el-button>
          <el-button type="primary" @click="centerDialogVisible = false; operateForTransportLineType = {}">关 闭
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 查询条件
      conditionForTransportLineType: {},
      // 返回的pageInfo
      transportLineTypePageInfo: {},
      // 控制对话框是否展示
      centerDialogVisible: false,
      // 对话框的title
      dialogTitle: '',
      // 新增和修改的操作条件
      operateForTransportLineType: {},
      // 判断是添加还是修改的tag
      operateTag: false,
      // 机构集合
      coreOrgList: [],
    }
  },
  created() {
    this.queryByConditionAndPage(1, 5);
  },
  methods: {
    // 分页条件查询线路类型数据
    queryByConditionAndPage: async function (currentPage, pageSize) {
      let res = await axios.post(`/api/pd-base/pd-transport-line-type/queryByConditionAndPage/${currentPage}/${pageSize}`, this.conditionForTransportLineType);
      if (res.data.code === 200) {
        // 查询成功
        this.$message.success('查询成功')
        this.transportLineTypePageInfo = res.data.data;
      } else {
        // 查询失败
      }
    },

    // 点击添加或修改展示对话框
    show: async function (row) {
      this.centerDialogVisible = true;

      if (row === null) {
        // 添加
        this.dialogTitle = '添 加';
        this.operateForTransportLineType = {}
        this.operateTag = true;
      } else {
        // 修改
        this.dialogTitle = '修 改';
        this.operateTag = false;
        this.operateForTransportLineType = JSON.parse(JSON.stringify(row));
      }
    },

    // 提交 添加或修改
    commitOperate: async function () {
      let url;
      if (this.operateTag) {
        url = `insert`;
      } else {
        url = `updateById`;
      }
      let res = await axios.post(`/api/pd-base/pd-transport-line-type/${url}`, this.operateForTransportLineType);

      res.data.code === 200 ? this.$message.success('操作成功！！！') : this.$message.success('操作失败！！！');

      await this.queryByConditionAndPage(this.transportLineTypePageInfo.pageNum, this.transportLineTypePageInfo.pageSize)
    },

    // 根据id删除
    deleteById: async function (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await axios.get(`/api/pd-base/pd-transport-line-type/deleteById/${id}`);
        if (res.data.code === 200) {
          this.$message.success('删除成功')
          await this.queryByConditionAndPage(this.transportLineTypePageInfo.pageNum, this.transportLineTypePageInfo.pageSize)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 每页显示条数改变
    handleSizeChange(val) {
      this.queryByConditionAndPage(this.transportLineTypePageInfo.pageNum, val);
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.queryByConditionAndPage(val, this.transportLineTypePageInfo.pageSize);
    }
  }
}
</script>

<style scoped>
.line-type {
  margin-top: 20px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
